<template lang="pug">
.container.theme-app(:class='getTheme')
  audio(:src='getBgMusicUrl', ref='bgAudio', preload)
  Loading(v-if='getLoaderState && isShowLoading', @closeLoading='closeLoading')

  .content(v-if='panoInfo')
    VRCtrl
    .pano-wrap
      Pano(ref='Pano')

    template(v-if='isstartsceneShowThree')
      //- 房产简易模板的场景按钮
      .scene-menu.hand(v-if='getThemeType === 13 && getIsShowNight')
        img.w50.h40(
          src='@/assets/img/场景菜单.png',
          @click='$refs.Pano.handleDbClick()'
        )
      //- 动态模板
      div(v-show='!isVrMode')
        component(:is='getCurComponent')
        Cart
        Ad
        Nav(v-if='getThemeType != 11 && getThemeType != 12')
        Tip(v-if='getThemeType != 11 && getThemeType != 12')
        Notice(v-if='getThemeType != 11 && getThemeType != 12')
        Login
        PendantOvv
        PendantDraw
        //- OriginSiteLink

      //- modal
      Barrage(v-if='getThemeType != 11 && visibleBarrage')
      VRBugTip
      Say
      Graphic
      Works
      PanoStore
      Share
      Swiper
      Checkout
      ScreenShots(ref='screenShots', v-if='getThemeType != 11')
      Address
      Welfare
      WelfarePhone

      //- iframe
      SocketIframe
      MapIframe
      LinkIframe
      ImageIframe
      ThreeIframe
      VideoIframe
      PluginIframe
      RewardIframe
      OrderCenter
      StartRemindIframe
      VideoTransitionIframe

      DirectoryHotspot

  //- 子路由层
  AppPage
</template>

<script>
// templatetype 模板id
// templatetype = 0 模板1
// templatetype = 1 模板2
// templatetype = 2 模板3
// templatetype = 3 模板4
// templatetype = 4 模板5
// templatetype = 5,7 模板6
// templatetype = 6 房地产模板
// templatetype = 8,9,10 807客户定制（生态模板，城市模板）
// templatetype = 11 航拍模板
// templatetype = 12 景点模板
// templatetype = 13 房地产简化模板

// 旧app模板
import TplA from '@/template/a/app'
import TplB from '@/template/b/app'
import TplC from '@/template/c/app'
import TplD from '@/template/d/app'
// 新app模板
import TplE from '@/template/e/app'
import TplF from '@/template/f/app'

import TplG from '@/template/g/app'
import TplH from '@/template/h/app'
import TplI from '@/template/i'
// TplN是由于房产模板id是13，在app.js里面拼class的时候要对应
import TplN from '@/template/n'

import vrMixins from '@/mixins/vr'
import mixinTplApp from '@/mixins/tpl-app'

import mixinApp from '@/mixins/app'
export default {
  name: 'appHomePage',
  mixins: [vrMixins, mixinApp, mixinTplApp],
  data() {
    return {
      isShow: false,
      isShowLoader: true,
      bgMusicBtn: false,
      component: TplA,
    }
  },
  mounted() {
    this.$vgo.on('canvas:show', () => {
      this.isShow = true
      setTimeout(() => {
        this.$refs.screenShots.showScreenshots()
      }, 200)
    })

    // 自动播放背景音乐
    const audioRef = this.$refs.bgAudio
    this.$vgo.on('music:audoplay', () => {
      this.audioAutoPlay(audioRef)
    })
    // 针对部分机器切换背景音乐
    this.$vgo.on('music:toggle-play', () => {
      this.bgMusicBtn ? audioRef.pause() : audioRef.play()
      this.bgMusicBtn = !this.bgMusicBtn
    })
  },
  computed: {
    getBgMusicUrl() {
      return this.$store.getters.bgMusic
    },
    getCurComponent() {
      if (this.getThemeType == 0) {
        this.component = TplA
      }
      if (this.getThemeType == 1) {
        this.component = TplB
      }
      if (this.getThemeType == 2) {
        this.component = TplC
      }
      if (this.getThemeType == 3) {
        this.component = TplD
      }
      if (this.getThemeType == 4) {
        this.component = TplE
      }
      if (this.getThemeType == 5 || this.getThemeType == 7) {
        this.component = TplF
      }
      if (this.getThemeType == 6) {
        this.component = TplG
      }
      if (this.getThemeType == 11) {
        this.component = TplH
      }
      if (this.getThemeType == 12) {
        this.component = TplI
      }
      if (this.getThemeType == 13) {
        this.component = TplN
      }
      return this.component
    },
    getLoaderState() {
      // ishideall=1时隐藏loading
      if (window.location.hash.indexOf('ishideall=1') !== -1) {
        return false;
      }
      return this.isShowLoader == 'GoodsDetail' ||
        this.isShowLoader == 'Cart' ||
        this.isShowLoader == 'ScenePay' ||
        this.isShowLoader == 'CardList' ||
        this.isShowLoader == 'Login'
        ? false
        : true
    },
  },
  methods: {
    audioAutoPlay(audio) {
      const play = () => {
        audio.play()
        document.removeEventListener('touchstart', play, false)
      }
      audio.play()
      this.bgMusicBtn = true
      document.addEventListener(
        'WeixinJSBridgeReady',
        function() {
          play()
        },
        false
      )
      document.addEventListener(
        'YixinJSBridgeReady',
        function() {
          play()
        },
        false
      )
      document.addEventListener('touchstart', play, false)
    },
  },
  watch: {
    $route(to, form) {
      this.isShowLoader = form.name
    },
    immediate: true,
  },
  components: {
    TplA,
    TplE,
  },
}
</script>

<style lang="stylus">
@import '../../assets/styles/app-theme.styl'

.container
  height 100vh
</style>
